<template>
  <div>
    <hyl-table :tableData="tableData" :columns="columns" :specialColumns="specialColumns" v-on:tableSelection="tableSelection">
      <template slot="buttons">
        <el-button type="text" icon="el-icon-edit" @click="handleClick({},'edit')">编辑</el-button>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleClick({},'add')">添加</el-button>
        <el-button type="text" icon="el-icon-delete" @click="handleClick({},'delete')">删除</el-button>
      </template>
      <!-- 定制表格单元格所显示内容 -->
      <div slot="type" slot-scope="scope">{{scope.$row.type ===1 ? '菜单' : '权限'}}</div>
    </hyl-table>
    <hyl-pagination :total="total" v-on:fetch="fetch" :page-sizes="[5,10,15]"/>

  </div>
</template>

<script>
import hylTable from '@/components/table'
import hylPagination from '@/components/pagination'
import {fetch} from '@/utils/http'
export default {
  name: 'index',
  components: {
    hylTable,
    hylPagination
  },
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      limit: 5,
      specialColumns: [{
        type: 'selection',
        width: '55'
      }, {
        type: 'index',
        indexMethod: this.indexMethod
      }],
      columns: [{
        prop: 'name',
        label: '名称',
        width: '180'
      }, {
        prop: 'url',
        label: '路径',
        width: '160'
      }, {
        prop: 'type',
        label: '类型',
        width: '55'
      }, {
        prop: 'level',
        label: '层级',
        width: '120'
      }, {
        fixed: '',
        prop: 'seq',
        label: '序例',
        width: '240'
      }]
    }
  },
  mounted: function () {
    this.fetch()
  },
  methods: {
    handleClick (row = {}, type = '') {
      switch (type) {
        case 'add':
          alert('add')
          break
        case 'delete':
          alert('删除')
          break
        case 'edit':
          alert('edit')
          break
        default:
          alert('其它操作')
      }
    },
    indexMethod (index) {
      return index + 1 + (this.page - 1) * this.limit
    },
    fetch (page = {
      page: 1,
      limit: 5
    }) {
      fetch('long-base-upms/sysMenu/page', page).then((res) => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.page = page.page
        this.limit = page.limit
      })
    }
  }
}
</script>

<style scoped>

</style>
